.geral{
    margin: 0;
    padding: 0;
    font-family: Cambria, Georgia, serif;
    width:100%;
    height:580px;
    color:#999;
    font-weight:bold;
    margin: 2% 0 0 2%;

}

img{
    border: none;
}

a {
    text-decoration: none;
    color: #000;
}

a:hover{
    text-decoration: none;
    color: #0096d6;
}

.historico{
    height:35%;
    width:30%;
    font-size:1.5em;
    margin-right: 2%;

    -moz-box-shadow:0px 0px 3px #C6E2F7;
    -webkit-box-shadow:0px 0px 3px #C6E2F7;
    box-shadow:0px 0px 3px #C6E2F7;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    border:2px solid #0096D6;
    overflow:hidden;
    float: left;

}

.topo{
    margin:2%;
    color:#000;
    height:12%;
}

.pessoa{
    float:left;
    margin-left:10%;
    margin-top:-9%;
}

.data{
    float:right;
    margin-top:-9%;
}

.barraPadrao{
    background:#999;
    height:3%;
    margin-top:0;
}
.barraRosa{
    background:#f3a0be;
    height:3%;
    margin-top:0;
}

.barraAmarelo{
    background:#f4b74d;
    height:3%;
    margin-top:0;
}

.barraVerde{
    background:#b9be6a;
    height:3%;
    margin-top:0;
}

.barraSalmao{
    background:#ff4500;
    height:3%;
    margin-top:0;
}

.barraRosaEsc{
    background:#ff1493;
    height:3%;
    margin-top:0;
}

.barraAzul{
    background:#0096d6;
    height:3%;
    margin-top:0;
}

.barraLilas{
    background:#996699;
    height:3%;
    margin-top:0;
}

.foto{
    width:100%;
}

.antes{
    width:35%;
    text-align:center;
    margin-top:2%;
}

.vs{
    margin-left:42%;
    margin-top:-30%;
}

.depois{
    width:35%;
    text-align:center;
    margin-left:65%;
    margin-top:-30%;
}

.fototam{
    width:80%;

}

.opcoes{
    width:100%;
    color:#000;
    text-align:center;
}

.visualizar{
    width:30%;
    margin:-1%;

}

.satisfacao{
    width:30%;
    margin-left:30%;
    margin-top:-10%;
}

.gostei{
    width:30%;
    margin-left:60%;
    margin-top:-9%;
}

/******* MEDIA QUERIES *******/
/* for 1280px or less */
@media screen and (max-width: 1280px) {

    .geral{
        height:600px;
        margin-left: 11%;
    }

    .historico{
        height:35%;
        width:25%;
    }
     
    .depois{
        margin-top:-28%;
    }

    .opcoes{
        margin-top:2%;
    }
}

/* for 1024px or less */
@media screen and (max-width: 1024px) {

    .geral{
        height:600px;
        margin-left: 2%;
    }

    .historico{
        height:35%;
        width:30%;
    }
    
    .depois{
        margin-top:-29%;
    }

    .opcoes{
        margin-top:2%;
    }

}

/* for 800px or less */
@media screen and (max-width: 800px) {

    .geral{
        height:800px;
        margin-left: 8.5%;
    }

    .historico{
        height:27%;
        width:40%;
    }

    .depois{
        margin-top:-28%;
    }

    .opcoes{
        margin-top:2%;
    }
}

/* for 360px or less */
@media screen and (max-width: 360px) {

    .geral{
        height:360px;
        margin-left: 8.5%;
    }

    .historico{
        height:60%;
        width:85%;
        margin: 1%;
    }

    .depois{
        margin-top:-28%;
    }

    .opcoes{
        margin-top:2%;
    }
}

